---
title: "Accessibility Checker Rule Help: Rpt_Aria_RequiredChildren_Native_Host_Sematics"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={16} colMd={8} colSm={4} className="toolHead">

### An element with WAI-ARIA `role="{0}"` does not contain or own at least one child element with each of the following WAI-ARIA roles: `{1}`

<div id="locLevel"></div>

An element with WAI-ARIA `role` must contain required children

</Column>
</Row>
<Row>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

### Why is this important?

If a WAI-ARIA `role` attribute is specified for an element, any WAI-ARIA child elements required for that role must also be present. Child elements' native WAI-ARIA roles satisfy the requirement - the role does not have to be explicitly set. Without the required child elements, assistive technologies may not be able to accurately represent or interact with the element.

<div id="locSnippet"></div>

### What to do

 * Add the appropriate required child element(s) to this element.

For example, the following element uses the `"radiogroup"` role. The `"radiogroup"` role requires child elements with `role="radio"` set in a manner that represents the checked or unchecked state of the radio button.

<CodeSnippet type="multi" light={true}>&lt;div role="radiogroup"&gt;
    &lt;div role="radio" aria-checked="false"&gt;&lt;/div&gt;
    &lt;div role="radio" aria-checked="true"&gt;&lt;/div&gt;
&lt;/div&gt;</CodeSnippet>

Example with an implicit role:

<CodeSnippet type="multi" light={true}>&lt;table role= "treegrid"&gt;
     &lt;tr&gt;
         &lt;td&gt;
            element with role= "treegrid" requires child element with role="row".
            TR has implicit WAI-ARIA role="row", so the condition is met
         &lt;td&gt;
     &lt;tr&gt;
&lt;/table&gt;</CodeSnippet>

</Column>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### About this requirement

[IBM 4.1.2 Name, Role, Value](https://www.ibm.com/able/requirements/requirements/#4_1_2)
[W3C WAI-ARIA 1.2 Required Owned Elements](https://www.w3.org/TR/wai-aria-1.2/#mustContain)

### Who does this affect?

* Blind people using a screen reader

</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)
